ClientList = Ext.extend(Ext.grid.GridPanel, {
    // Prototype Defaults, can be overridden by user's config object
    width: 250,
    height: 500,
    title: 'Client',
    region: 'west',
    
    trackMouseOver: true,
    disableSelection: false,
    loadMask: true,
    
    // grid columns
    // grid columns
    columns: [{
        header: "client_id",
        dataIndex: 'client_id',
        width: 100,
        hidden: true,
        sortable: true
    }, {
        header: "Client",
        dataIndex: 'client_name',
        width: 100,
        sortable: true
    }, {
        header: "Phone",
        dataIndex: 'phone',
        width: 150,
        sortable: true
    }, {
        header: "Address",
        dataIndex: 'client_addr',
        width: 100,
        hidden: true,
        sortable: true
    }, {
        header: "ctime",
        dataIndex: 'ctime',
        width: 100,
        hidden: true,
        sortable: true
    }, {
        header: "mtime",
        dataIndex: 'mtime',
        width: 100,
        hidden: true,
        sortable: true
    }],
    
    // customize view config
    viewConfig: {
        forceFit: true,
        enableRowBody: true,
        showPreview: true,
        getRowClass: function(record, rowIndex, p, store){
            if (this.showPreview) {
                p.body = '<p>' + record.data.client_addr + '</p>';
                return 'x-grid3-row-expanded';
            }
            return 'x-grid3-row-collapsed';
        }
    },
    listeners: {
        //viewready:
        viewready: function(g){
            g.getSelectionModel().selectRow(0);
        }
    },
	
    store: new Ext.data.JsonStore({
        root: 'results',
        totalProperty: 'totalCount',
        idProperty: 'client_id',
        remoteSort: true,
        fields: [{
            name: 'client_id',
            type: 'string'
        }, {
            name: 'client_name',
            type: 'string'
        }, {
            name: 'phone',
            type: 'string'
        },{
            name: 'client_addr',
            type: 'string'
        }, {
            name: 'ctime',
            type: 'string'
        }, {
            name: 'mtime',
            type: 'string'
        }],
        
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy({
            url: '/client'
        })
    }),
    
    initComponent: function(){
        // Called during component initialization
        
        // Config object has already been applied to 'this' so properties can 
        // be overriden here or new properties (e.g. items, tools, buttons) 
        // can be added, eg:
        /*
         Ext.apply(this, {
         propA: 3
         });*/
        // Before parent code
        
        
        // Call parent (required)
        ClientList.superclass.initComponent.apply(this, arguments);
        
        // After parent code
        // e.g. install event handlers on rendered component
    },
    
    // Override other inherited methods 
    onRender: function(){
    
        // Before parent code
        
        // Call parent (required)
        ClientList.superclass.onRender.apply(this, arguments);
        // After parent code
    
    
    }
});

// register xtype to allow for lazy initialization
Ext.reg('clientlist', ClientList);

